<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>书籍投票系统</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 标题部分 -->
    <div class="flex justify-between items-center mb-8 border-b pb-4">
        <h1 class="text-3xl font-bold text-indigo-700">📚 书籍在线投票系统</h1>
        <a href="login.jsp" class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-700 transition flex items-center gap-2 text-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
            </svg>
            管理员登录
        </a>
    </div>

    <!-- 消息提示部分 -->
    <c:if test="${not empty error}">
        <div class="mb-6 p-3 bg-red-100 border-l-4 border-red-500 text-red-700 rounded">
            <p>${error}</p>
            <a class="mt-1 inline-block text-blue-600 hover:text-blue-800 text-sm" href="index">返回首页</a>
        </div>
    </c:if>
    <c:if test="${not empty success}">
        <div class="mb-6 p-3 bg-green-100 border-l-4 border-green-500 text-green-700 rounded">
            <p>${success}</p>
            <a class="mt-1 inline-block text-blue-600 hover:text-blue-800 text-sm" href="index">返回首页</a>
        </div>
    </c:if>

    <!-- 书籍投票部分 -->
    <c:if test="${not empty books}">
        <c:set var="totalVotes" value="0" />
        <c:forEach items="${books}" var="book">
            <c:set var="totalVotes" value="${totalVotes + book.votes}" />
        </c:forEach>

        <h2 class="text-xl font-semibold text-gray-800 mb-4">请为您喜欢的书籍投票</h2>

        <div class="space-y-4">
            <c:forEach items="${books}" var="book">
                <div class="bg-white p-4 rounded border hover:bg-gray-50 transition">
                    <div class="flex items-center justify-between">
                        <div class="flex-1 min-w-0">
                            <h3 class="text-lg font-medium text-gray-800 truncate">《${book.title}》</h3>
                            <p class="text-sm text-gray-500">作者: ${book.author}</p>
                        </div>

                        <div class="flex items-center space-x-6 ml-4">
                            <div class="text-center">
                                <span class="text-sm text-gray-500 block">票数</span>
                                <span class="font-medium text-indigo-600">${book.votes}</span>
                            </div>

                            <div class="text-center">
                                <span class="text-sm text-gray-500 block">占比</span>
                                <span class="font-medium text-indigo-600">
                                    <fmt:formatNumber value="${book.votes / totalVotes * 100}" pattern="#"/>%
                                </span>
                            </div>

                            <form action="vote" method="post" class="ml-4">
                                <input type="hidden" name="bookId" value="${book.id}">
                                <button type="submit" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm rounded transition">
                                    投票
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- 投票进度条 -->
                    <div class="mt-2 w-full bg-gray-200 rounded-full h-1.5">
                        <div class="bg-indigo-600 h-1.5 rounded-full"
                             style="width: <fmt:formatNumber value="${book.votes / totalVotes * 100}" pattern="#"/>%"></div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </c:if>

    <!-- 无数据提示 -->
    <c:if test="${empty books and empty error and empty success}">
        <div class="text-center py-8 border rounded bg-white p-6">
            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
            </svg>
            <h3 class="mt-3 text-lg font-medium text-gray-900">暂无书籍数据</h3>
            <p class="mt-1 text-gray-500">当前没有可供投票的书籍。</p>
        </div>
    </c:if>
</div>
</body>
</html>